<template>
  <el-pagination
    :current-page="pageNum"
    :page-size="pageSize"
    :page-sizes="pageSizeOpts"
    size="default"
    layout="total, sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    style="display: flex; justify-content: center;"
  />
</template>

<script setup>

const props = defineProps({
  pageNum: Number,
  pageSize: Number,
  total: Number,
  pageSizeOpts: {
    type: Array,
    default(){
      return [10, 40, 100, 200]
    }
  },
})

const emits = defineEmits(['update:pageNum', 'update:pageSize'])

const handleCurrentChange = (val) => {
  emits('update:pageNum', val);
}

const handleSizeChange = (val) => {
  emits('update:pageSize', val);
}
</script>
